<template>
	<view class="j_cont">
		<!-- 导航栏 -->
		<view class="j_top">
			<!-- 跳转图标 -->
			<view class="j_left_icon">
				<text @click="back">&lt;</text>
			</view>
			<!-- 标题 -->
			<view class="j_title">
				实名认证
			</view>
			<!-- right -->
			<view class="j_ttip">
				<text @click="release">提交</text>
			</view>
		</view>
		<!-- 表单 -->
		<view class="j_form">
			<u-form :model="form" ref="uForm">
				<!-- 姓名 -->
				<u-form-item label="姓名" prop="name" placeholder="请输入姓名">
					<u-input v-model="form.name" />
				</u-form-item>
				<!-- 性别 -->
				<u-form-item label="性别">
					<u-radio-group v-model="form.radio">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- 学校 -->
				<u-form-item label="学校" prop="school" placeholder="请输入学校名">
					<u-input v-model="form.school" />
				</u-form-item>
				<!-- 学号 -->
				<u-form-item label="学号" prop="studentId" placeholder="请输入学号">
					<u-input v-model="form.studentId" />
				</u-form-item>
				<view class="j_identity">
					<view class="j_listtitle">
						学生证
					</view>
					<u-form-item>
						<!-- 增加头像 -->
						<u-upload ref="uUpload" :action="action" :auto-upload="true" @on-success="uploadSuccess"
							max-count="1">
						</u-upload>
					</u-form-item>
					<!-- 示例 -->
					<view class="j_listtitles">
						示例
					</view>
					<!-- 示例图片 -->
					<view class="j_Examples">
						<img src="http://127.0.0.1:7001/public/user/shili.png" alt="">
					</view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//登录页传递过来id
				id: undefined,
				// 设置图片存储的位置
				action: 'http://127.0.0.1:7001/api/updateImg',
				// 获取图片
				items: {
					img1: [],
					img: 'http://127.0.0.1:7001/public/cxyimg/cxy_5.png'
				},
				// 表单value
				form: {
					//姓名
					name: '',
					//学校
					school: '',
					//学号
					studentId: '',
					//默认选中男
					radio: '男',
					//是否认证
					whether: 1,
				},
				//表单验证规则
				rules: {
					//姓名
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					//学校
					school: [{
						required: true,
						message: '请输入学校名称',
						trigger: ['change', 'blur'],
					}],
					//学号
					studentId: [{
						min: 6,
						max: 6,
						required: true,
						message: '学号长度在为六位',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				//单项选择的数据
				radioList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],

			}
		},
		methods: {
			//返回上一级页面
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//发布
			uploadSuccess(data, index, lists, name) {
				var arr = []
				lists.forEach(({
					response
				}) => {
					arr.push(`http://127.0.0.1:7001${response.data}`)
				})
				// console.log(arr)
				this.items.img1 = arr.join()
			},
			//更新头像

			release() {
				//获取用户传递的数据
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$api.jnameAddMsg({
							name: this.form.name,
							school: this.form.school,
							whether: this.form.whether,
							radio: this.form.radio,
							studentId: this.form.studentId,
							img: this.items.img1
						}).then(res => {
							// console.log(res)
							if (res.code == 200) {
								this.form.name = '',
								this.form.school = '',
								this.form.studentId = '',
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				});
			},

		},
		//获取你要更改数据的id
		onLoad(option) {
			this.id = option.id
		},
		//在渲染的时候进行验证挂载
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}

	}
</script>

<style lang="scss" scoped>
	//主体验证
	.j_cont {
		width: 100%;
		height: 100vh;
		background: #F2F2F2;

		//导航栏
		.j_top {
			width: 100%;
			height: 80upx;
			background: white;
			padding: 0 20upx;
			box-sizing: border-box;
			line-height: 80upx;
			display: flex;
			margin-bottom: 20upx;

			//left
			.j_left_icon {
				width: 10%;
				height: 100%;

				font-size: 40upx;
				text-align: center;
			}

			//title
			.j_title {
				width: 70%;
				height: 100%;
				text-align: center;
			}

			//right
			.j_ttip {
				width: 20%;
				height: 100%;
				text-align: center;
				color: #999999;
				font-size: 30upx;
			}
		}
	}

	//表单验证
	.j_form {
		width: 100%;
		// height: 800upx;
		background: white;
		padding: 0 20upx;
		box-sizing: border-box;
		
		//身份图片
		.j_identity {
			width: 100%;
			height: 260upx;
			display: flex;
		}
		//list 证明
		.j_listtitle{
			width: 15%;
			height: 60upx;
			text-align: center;
			line-height: 60upx;
			font-size: 30upx;
		}
		//示例
		.j_listtitles{
			width: 20%;
			height: 60upx;
			text-align: right;
			line-height: 60upx;
			font-size: 30upx;
			padding-right: 20upx;
			box-sizing: border-box;
		}
		//图片示例
		.j_Examples{
			width: 35%;
			height: 100%;
			padding-top: 40upx;
			img{
				width: 100%;
			}
		}
	}
</style>
